/**
 * Created by Administrator on 2016/5/23 0023.
 */
$(window).on("load",function(){
    ready();
    $(window).on("scroll",function(){
        if(canDown()){
            var data = {
                "data1":[
                    {'src': 'images/pbl/13.jpg'},
                    {'src': 'images/pbl/14.jpg'},
                    {'src': 'images/pbl/15.jpg'},
                    {'src': 'images/pbl/16.jpg'},
                    {'src': 'images/pbl/17.jpg'},
                    {'src': 'images/pbl/18.jpg'},
                    {'src': 'images/pbl/19.jpg'},
                    {'src': 'images/pbl/20.jpg'}
                ]
            };
            var data2=[
                { 'title': '丝质柔滑面料 干净舒适。衣襟拼色，时尚有型，金属质地纽扣，完美细节品质。'},
                { 'title': '干练利落的尖领融合复古的做旧蓝色，于撞色对比间营造视觉冲击力，展现鲜明的时尚态度。'},
                { 'title': '鲜嫩的鹅黄色圆领配以拉链前襟十分吸引眼球，亲肤丝棉材质舒适贴合肌肤，恰到好处的休闲造型极富亲和力'},
                { 'title': '淡雅桃与经典黑色的撞色拼接，展现大气利落气质。'},
                { 'title': '清新利落的白色衬衫小翻领设计，平添一份邻家女孩般清爽干净的气质。'},
                { 'title': '简约圆领，凸显优雅大方气质。裙身采用有浮雕质感的花型，更添女性柔美浪漫的古典气质。'},
                { 'title': '丝质柔滑面料 干净舒适。衣襟拼色，时尚有型，金属质地纽扣，完美细节品质。'},
                { 'title': '胸前以沙漏式的剪裁以及颇具设计感的隐形开叉设计，轻松衬出姣美丰满的胸型。'}
            ];
            $.each(data.data1,function(key,value){//不懂 留着问老师，添加新节点以及和数据之间的交互问题
                var oBox=$('<div>').addClass("box").appendTo($("#main"));
                var oPic=$('<div>').addClass("pic").appendTo($(oBox));
                var oImg=$('<img>').attr("src",$(value).attr("src")).appendTo($(oPic));
                var oTitle=$('<div>'+data2[key].title+'</div>').appendTo($(oPic));
            });
            ready();//调用准备函数 ，对新添加的元素进行定位，以及刷新列高
        }
    })
});
function ready(){
    var oBoxs=$("#main>div");//获取所有的div
    var windowW=$(window).width();//获取窗口的宽度
    var oBoxsW=oBoxs.outerWidth();//获取每一个div的宽度
    var cols=Math.floor(windowW/oBoxsW);//计算当前窗口可以放几列内容
    $("#main").css({"width":(cols*oBoxsW)+"px","margin":"0 auto"});//设置main的样式
    var arrH=[];//定义一个空数组，用于储存每一列的高度
    oBoxs.each(function(index,value){//each是JQ中的一种遍历方式，index代表当前遍历元素的索引，value代表当前遍历元素的值
        var everyH=oBoxs.eq(index).outerHeight();//获取每一个DIV的高度
        if(index<cols){
            arrH[index]=everyH;//如果遍历的元素索引小于总列数，则储存一下每一列的高度
        }else{
            var minH=Math.min.apply(null,arrH);//获取数组中最小的元素
            var minHindex= $.inArray(minH,arrH);//获取数组中最小的元素的索引
            $(value).css({"position":"absolute","left":oBoxsW*minHindex+"px","top":minH+"px"});//设置当前遍历的元素的样式，使其定位在高度最小的列下方
            arrH[minHindex]+=oBoxs.eq(index).outerHeight();//刷新数组中元素值
        }
    })
}
function canDown(){
    var lastBox=$(".box:last");//获取未添加新元素前的最后一个添加的元素
    var lastBoxTop=lastBox.offset().top+Math.floor(lastBox.outerHeight()/2);//获取最后一个元素相对于页面顶部的高度
    var windowH=$(window).height();//获取可是窗口的高度
    var scollTop=$(window).scrollTop();//获取滚动条滚动的高度
    return (lastBoxTop<windowH+scollTop) ? true:false;//判断是否加载新元素的语句  返回TRUE或FALSE
}